<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}" >
    <script type="text/javascript">
        /*$(function () {
            $.ajax({
                url: "book",
                data: "pn=1",
                type: "GET",
                success: function (result) {
                    //解析表格
                    table(result);
                }
            });
        });
            function table(result) {
                var book = result.extend.pageInfo.list;
                console.log(book);
                $.each(book, function (index, item) {
                    var id = $("<td></td>").append(item.id);
                    var bookname = $("<td></td>").append(item.bookname);
                    var press = $("<td></td>").append(item.press);
                    var author = $("<td></td>").append(item.author);
                    var pricing = $("<td></td>").append(item.pricing);
                    var amount = $("<td></td>").append(item.amount);
                    var upbtn = $("<button></button>").addClass("btn btn-primary btn-sm")
                        .append($("<span></span>")).addClass("glyphicon glyphicon-pencil")
                        .append("编辑");
                    var debtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                        .append($("<span></span>")).addClass("glyphicon glyphicon-trash")
                        .append("删除");
                    var btn = $("<td></td>").append(upbtn).append(" ").append(debtn);

                    $("<tr></tr>").append(id).append(bookname).append(press).append(author)
                        .append(pricing).append(amount).append(btn).appendTo("#eatable tbody");
                });
            }*/
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <h1>SSM+SpringBoot-CRUD</h1>
    </div>
    <div class="row">
        <form action="showbook" method="get">
            <div class="form-inline col-md-12 col-md-offset-2">
                <div class="form-group">
                    <label>书名:</label>
                    <input type="text" name="bookname" class="form-control">
                </div>
                <div class="form-group">
                    <label>作者:</label>
                    <input type="text" name="author" class="form-control">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary glyphicon glyphicon-search">搜索</button>
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary glyphicon glyphicon-plus">添加</button>
            <button class="btn btn-danger glyphicon glyphicon-trash" shiro:hasRole="VIP">删除</button>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <table class="table table-bordered table-hover table-condensed" id="eatable">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>书名</th>
                    <th>出版社</th>
                    <th>作者</th>
                    <th>定价</th>
                    <th>数量</th>
                    <th shiro:hasRole="VIP">操作</th>
                </tr>
                </thead>
                <tbody>
                    <tr th:each="book:${pageInfo.list}">
                        <td th:text="${book.id}"></td>
                        <td th:text="${book.bookname}"></td>
                        <td th:text="${book.press}"></td>
                        <td th:text="${book.author}"></td>
                        <td th:text="${book.pricing}"></td>
                        <td th:text="${book.amount}"></td>
                        <td shiro:hasRole="VIP">
                            <button class="btn btn-primary btn-sm" id="upbook">
                                <span class="glyphicon glyphicon-pencil"></span>
                                编辑
                            </button>
                            <button class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash"></span>
                                删除
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            当前页[[${pageInfo.pageNum}]],总共[[${pageInfo.pages}]]页，总记录数[[${pageInfo.total}]]
        </div>
        <div class="col-md-8">
            <div class="col-md-8 col-md-offset-4">
                <ul class="pagination" id="pageinfo">
                    <li><a th:href="'showbook?pn=1'">首页</a></li>
                     <li th:if="${pageInfo.hasPreviousPage}">
                        <a th:href="'showbook?pn='+${pageInfo.pageNum-1}">&laquo;</a>
                     </li>

                    <li th:each="pageNum:${pageInfo.navigatepageNums}">

                            <a th:if="${pageInfo.pageNum == pageNum}" th:href="'showbook?pn='+${pageNum}">[[${pageNum}]]</a>

                            <a th:if="${pageInfo.pageNum != pageNum}" th:href="'showbook?pn='+${pageNum}">[[${pageNum}]]</a>
                    </li>

                    <li th:if="${pageInfo.hasNextPage}">
                        <a th:href="'showbook?pn='+${pageInfo.pageNum+1}">&raquo;</a>
                    </li>
                    <li><a th:href="'showbook?pn='+${pageInfo.pages}">尾页</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

</body>
</html>